<template>
  <div class="app-container">
    <!-- 搜索 -->
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" />

    <!-- 表格 -->
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" 
     >
     <template #is_locked="scope">
        <el-tag type="danger" v-if="!!scope.row.is_locked">
          {{ t('status.1') }}
        </el-tag>
        <el-tag type="info" v-else >
          {{ t('status.2') }}
        </el-tag>
      </template>
     <template #type="scope">
        <el-tag type="primary" v-if="scope.row.type === 'owner' ">
          {{ t('status.52') }}
        </el-tag>
        <el-tag type="info" v-else-if="scope.row.type === 'historical' ">
          {{ t('status.53') }}
        </el-tag>
      </template>
      <template #status="scope">
        <el-tag type="success" v-if="scope.row.status === 'active' ">
          {{ t('status.50') }}
        </el-tag>
        <el-tag type="danger" v-else-if="scope.row.status === 'inactive' ">
          {{ t('status.51') }}
        </el-tag>
      </template>
    </PageContent>

    <!-- 表单 -->
    <formModal ref="formModalRef" @refresh-table="handleQuery" />

  </div>
</template>

<script setup>
import usePage from "@/hooks/usePage";
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import formModal from './form-modal/index.vue'

defineOptions({
  name: "userBanks",
  inheritAttrs: false,
});
const { t } = useI18n();

const { contentRef, 
  handleSubmitClick, handleExportClick,handleResetClick,handleQueryClick } = usePage();

const formModalRef = ref(null)

const handleQuery = () => {
  handleSubmitClick()
}

const handleEditClick = (row) => {
  if(formModalRef.value){
    formModalRef.value.initModal({ row, type: 1 });
  }
}
const handleAddClick = (row) => {
  if(formModalRef.value){
    formModalRef.value.initModal({ row, type: 0 });
  }
}

</script>